<template>
  <div class="setting-main">
    <h3 class="section-title">隐私设置</h3>
    <div class="setting-first-bon">
      <!--第一页-->
      <div class="first-set">
        <div style="margin: 15px 0;width: 200px;position: relative;" v-for="item in settingMenu.slice(0,6)" :key="item">
          <div style="font-size: 14px;width: 137px">{{item.settingType}}</div>
          <div style="position: absolute;right: 0;top: -4px">
            <el-switch @change="geoMapChange(item)" size="small" v-model="item.svalue" style="--el-switch-on-color: #00a1d6;"/>
            <span style="font-size: 12px;color: #9499a0;margin-left: 5px">{{item.svalue==true?'公开':'隐藏'}}</span>
          </div>
        </div>
      </div>
      <!--第二页-->
      <div class="first-set">
        <div style="margin: 15px 0;position: relative;width: 260px" v-for="item in settingMenu.slice(6,11)" :key="item">
          <div style="font-size: 14px;width: 200px;">{{item.settingType}}</div>
          <div style="position: absolute;right: 0;top: -4px">
            <el-switch @change="geoMapChange(item)" size="small" v-model="item.svalue" style="--el-switch-on-color: #00a1d6;"/>
            <span style="font-size: 12px;color: #9499a0;margin-left: 5px">{{item.svalue==true?'公开':'隐藏'}}</span>
          </div>
        </div>
      </div>
      <!--第三页-->
      <div class="first-set">
        <div style="margin: 15px 0;position: relative;width: 307px" v-for="item in settingMenu.slice(11)" :key="item">
          <div style="font-size: 14px;width: 250px;">{{item.settingType}}</div>
          <div style="position: absolute;right: 0;top: -4px">
            <el-switch @change="geoMapChange(item)" size="small" v-model="item.svalue" style="--el-switch-on-color: #00a1d6;"/>
            <span style="font-size: 12px;color: #9499a0;margin-left: 5px">{{item.svalue==true?'公开':'隐藏'}}</span>
          </div>
        </div>
      </div>
    </div>
    <h3 class="section-title">排序设置</h3>
    <div style="margin: 17px 0 20px 0;border-bottom: 1px solid #eee;display: flex;padding-bottom: 20px">
      <div class="section-sort">
        <!--菜单排序组件-->
        <draggable :list="changeSetSortList" item-key="id" :animation="100" :sort='true'  @end="onEnd">
          <template #item="{ element }">
            <div class="section-sort-item">
              {{element.settingName}}
              <span title="拖动以排序" class="iconfont icon-liebiao1-copy sort-item-span"></span>
            </div>
          </template>
        </draggable>
      </div>
      <div class="section-sort">
        <!--菜单排序组件-->
        <draggable :list="changeSetSortSecondList" item-key="id" :animation="100" :sort='true'  @end="onEndSecond">
          <template #item="{ element }">
            <div class="section-sort-item">
              {{element.settingName}}
              <span title="拖动以排序" class="iconfont icon-liebiao1-copy sort-item-span"></span>
            </div>
          </template>
        </draggable>
      </div>
    </div>
    <h3 class="section-title">我的个人标签</h3>
    <div style="margin-top: 20px;">
      <div class="setting-add-tag">
        <input type="text" id="setting-new-tag" maxlength="10" class="length-check space_input">
        <span class="setting-new-tag-btn">新增</span>
      </div>
    </div>
  </div>
</template>

<script>
//导入draggable组件
import draggable from 'vuedraggable'

export default {
  name: "settingPage",
  components: {draggable},
  data(){
    return{
      value2:false,
      // 当switch改变时数组中的值也相应被改变
      settingMenu:[
        {settingType:'公开我的收藏',svalue:false},
        {settingType:'公开我的追番追剧',svalue:false},
        {settingType:'公开最近投币的视频',svalue:false},
        {settingType:'公开最近点赞的视频',svalue:false},
        {settingType:'公开我的关注列表',svalue:true},
        {settingType:'公开我的粉丝列表',svalue:true},
        {settingType:'公开佩戴的粉丝勋章',svalue:true},
        {settingType:'勋章墙公开显示所有粉丝勋章（仅在上一选项公开时展现）',svalue:true},
        {settingType:'公开我的生日、个人标签',svalue:false},
        {settingType:'公开学校信息',svalue:true},
        {settingType:'公开最近玩过的游戏',svalue:false},
        {settingType:'公开我的追漫(仅APP）',svalue:false},
        {settingType:'公开拥有的粉丝装扮（仅APP）',svalue:false},
        {settingType:'公开轻视频主页（仅APP）',svalue:false},
        {settingType:'投稿视频列表中展现直播回放',svalue:true},
        {settingType:'投稿视频列表中展现包月充电专属视频',svalue:true},
        {settingType:'投稿视频列表中展现课堂视频',svalue:true},
      ],
      changeSetSortList:[
        {settingName:'我的稿件'},
        {settingName:'订阅番剧'},
        {settingName:'我的收藏夹'},
        {settingName:'最近投币的视频'},
        {settingName:'我的视频列表'},
        {settingName:'我的专栏'},
        {settingName:'我的相簿'},
        {settingName:'最近点赞的视频'},
      ],
      changeSetSortSecondList:[
        {settingName:'公告'},
        {settingName:'直播间'},
        {settingName:'个人资料'},
        {settingName:'最近玩过的游戏'},
        {settingName:'预约'},
      ],
    }
  },
  methods:{
    geoMapChange(item){
      console.log(item)
      console.log(this.settingMenu)
    },
    onEnd(){
      console.log('执行')
    },
    onEndSecond(){
      console.log('执行2')
    },
  }
}
</script>

<style scoped>
.first-set{
  margin-right: 60px;
  position: relative;
}
.setting-first-bon{
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 17px;
}
.setting-main{
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  padding: 20px;
  width: 1283px!important;
}
.section-title {
  color: #000;
  font-size: 20px;
  font-weight: 400;
  position: relative;
}
.section-sort{
  height: 100%;
  margin-right: 40px;
  width: 208px;border-top: 1px solid #ccd0d7;overflow:hidden;
  border-right:1px solid #ccd0d7;border-left:1px solid #ccd0d7;border-radius: 4px;font-size: 14px;
}
.section-sort-item{
  border-bottom: 1px solid #ccd0d7;height: 42px;line-height: 42px;padding: 0 10px;cursor: move;font-size: 14px;position: relative;
}
.sort-item-span{
  font-size: 20px;position: absolute;right: 10px;color: rgb(203,208,216)
}
.section-sort-item:hover{
  background-color: #00a1d6;
  color: white;
}
.section-sort-item:hover .sort-item-span{
  color: white;
}
#setting-new-tag {
  border-radius: 4px 0 0 4px;
  width: 100px;
}
.space_input {
  line-height: 28px;
  height: 28px;
  padding: 0 10px;
  transition: all .3s ease;
  vertical-align: top;
  border: 1px solid #ccd0d7;
}
.space_input:focus{
  border: 1px solid #00a1d6;
}
.space_input:focus+.setting-new-tag-btn{
  border: 1px solid #00a1d6;
}
.setting-new-tag-btn {
  font-size: 12px;
  display: inline-block;
  line-height: 26px;
  padding: 0 15px;
  margin-left: -5px;
  transition: all .3s ease;
  color: #00a1d6;
  background: linear-gradient(#fff,#f7f9fa);
  border: 1px solid #ccd0d7;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
</style>
